<template>
<!-- 人员发展 - 晨会日看板 -->
  <div class="personal-detail">
    <board-title v-if="isFz()" title="发展" bgclass="bg-fz">
      <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_fz.png" />
      <div slot="other-time" class="flag-time">
        <date-time ref="dataTimeRefday" @date="handleChange" />
      </div>
    </board-title>
    <board-title v-if="isWx()" title="维系" bgclass="bg-wx">
      <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_wx.png" />
      <div slot="other-time" class="flag-time">
        <date-time ref="dataTimeRefday" @date="handleChange" />
      </div>
    </board-title>
    <board-title v-if="isZj()" title="智家" bgclass="bg-zj">
      <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_zj.png" />
      <div slot="other-time" class="flag-time">
        <date-time ref="dataTimeRefday" @date="handleChange" />
      </div>
    </board-title>
    <board-title v-if="isJf()" title="交付" bgclass="bg-jf">
      <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_jf.png" />
      <div slot="other-time" class="flag-time">
        <date-time ref="dataTimeRefday" @date="handleChange" />
      </div>
    </board-title>
    <div class="detail-info">
      <div class="title">{{ title[type] }}</div>
      <div class="info-item">
        <div class="value-title">
          <span class="sub-title" v-if="isFz() || isZj()">当月累计/当月目标</span>
          <span class="sub-title" v-if="isWx() || isJf()">当日值/当月累计</span>
          <span class="value">{{ value }}/{{ mvalue }}<span class="unit">户</span></span>
        </div>
        <div class="percent-title">
          <span class="sub-title">环比上月</span>
          <span v-if="hb >= 0" class="percent up">
            {{ hb }}%
            <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
          </span>
          <span v-else class="percent down">
            {{ hb }}%
            <img src="~@/assets/imgs/publicline/index/arrow_down.png" />
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import boardTitle from '@/views/components/publicline/board/title.vue'
import dateTime from '@/components/common/dateTime.vue'
import { accountDate } from '@/api/common.js'
import * as dayjs from "dayjs"

import { kpiDay } from '@/api/publicline/board.js'

export default {
  components: { dateTime, boardTitle },
  data() {
    return {
      dayId: '',
      type: '',
      value: 0,
      mvalue: 0,
      hb: 0,
      title: {
        gsm: '移网',
        kd: '宽带',
        rh: '融合',
        // yqt: '云企通',
        gsm5g: '5G',
        qz: '千兆',
        gh: '固话',
        qz5g: '5G迁转',
        sjb5g: '5G升级包',
        kdtsb: '宽带提速包',
        kdxy: '宽带续约',
        tcsd: '套餐升档',
        wjgh: '沃家固话',
        wjzw: '沃家组网',
        wjsy: '沃家神眼',
        iptv: 'IPTV',
        yj: '移机',
        zj: '装机',
        xz: '修障',
        jf2i: '2I交付'
      },
      kpiCode: {
        gsm: 'SN00101-090006',
        kd: 'SN0010204-090006',
        rh: 'SN00106-090006',
        gsm5g: 'SN0010102-090006',
        qz: 'SN001020403-090006',
        gh: 'SN0010201-090006',
        qz5g: 'SN001010402-090006',
        sjb5g: 'SN001010403-090006',
        kdtsb: 'SN001020402-090006',
        kdxy: 'SN00102041-090006',
        tcsd: 'SN001011-090006',
        wjgh: 'SN0010215-090006',
        wjzw: 'SN0010210-090006',
        wjsy: 'SN0010211-090006',
        iptv: 'SC00103-090006',
        yj: 'SN0030204-090006',
        zj: 'SN0030203-090006',
        xz: 'SN0030205-090006',
        jf2i: 'YW00101011-090006'
      }
    }
  },
  methods: {
    // 获取日账期
    async getAccountDate(dayId) {
      const res = await accountDate({ PARAMCODE: 'D' })
      const { result, success } = res
      if (success) {
        this.$refs.dataTimeRefday.initDateTime(dayjs(dayId).format('YYYY-MM-DD'), dayjs(result[0].value).format('YYYY-MM-DD'))
      }
    },
    // 获取改变的账期
    handleChange(val) {
      this.dayId = val
      // if(this.type != 'yqt') {
      this.getKpiDay()
      // }
      this.$emit('date', dayjs(val).format('YYYYMMDD'))
    },
    handleData(type, value, mvalue, hb) {
      this.type = type
      this.value = value
      this.mvalue = mvalue
      this.hb = hb
    },
    // 获取单一值指标
    async getKpiDay() {
      const res = await kpiDay({ dayId: dayjs(this.dayId).format('YYYYMMDD'), orgId: this.$dataPermission, kpiCode: this.kpiCode[this.type] })
      const { result, success } = res
      if (success) {
        const info = result[0] || {}
        // 维系、交付
        if(this.isWx() || this.isJf()) {
          this.value = info.KPI_VALUE || 0
          this.mvalue = info.TOTAL_VALUE || 0
        } else {
          this.value = info.TOTAL_VALUE || 0
          // 发展
          if(this.type == 'gsm') this.mvalue = info.MB_GSM_VALUE || 0
          if(this.type == 'kd') this.mvalue = info.MB_KD_VALUE || 0
          if(this.type == 'rh') this.mvalue = info.MB_RH_VALUE || 0
          if(this.type == 'gsm5g') this.mvalue = info.MB_GSM_5G_VALUE || 0
          if(this.type == 'qz') this.mvalue = info.MB_QZ_VALUE || 0
          if(this.type == 'gh') this.mvalue = info.MB_GH_VALUE || 0
          // 智家
          if(this.type == 'wjgh') this.mvalue = info.MB_WJGH_VALUE || 0
          if(this.type == 'wjzw') this.mvalue = info.MB_WJZW_VALUE || 0
          if(this.type == 'wjsy') this.mvalue = info.MB_WJSY_VALUE || 0
          if(this.type == 'iptv') this.mvalue = info.MB_IPTV_VALUE || 0
        }
        this.hb = info.HB || 0
      }
    },
    isFz() {
      const merge = ['gsm', 'kd', 'rh', 'yqt', 'gsm5g', 'qz', 'gh']
      return merge.includes(this.type)
    },
    isWx() {
      const merge = ['qz5g', 'sjb5g', 'kdtsb', 'kdxy', 'tcsd']
      return merge.includes(this.type)
    },
    isZj() {
      const merge = ['wjgh', 'wjzw', 'wjsy', 'iptv']
      return merge.includes(this.type)
    },
    isJf() {
      const merge = ['yj', 'zj', 'xz', 'jf2i']
      return merge.includes(this.type)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .seller {
  .van-cell,
  .van-cell--clickable:active {
    background-color: unset;
  }
  .van-cell::after {
    border-bottom: unset;
  }
}
</style>